<template>
  <table width="100%" class="cartTable" cellspacing="0" cellpadding="10px">
    <!-- 首行 -->
    <tr class="title">
      <td width="50">
        <input type="checkbox" name="" class="choose_all" @click="allChecked" />
      </td>
      <td width="100" class="">
        <span style="margin-left: -10px">全选</span>
      </td>
      <td width="400">商品信息</td>
      <td width="150">单价（元）</td>
      <td width="150">数量</td>
      <td width="150">金额（元）</td>
      <td width="80">操作</td>
    </tr>

    <!-- 商品具体信息 -->
    <tr class="row" v-for="item in renderData" :key="item.id">
      <td>
        <input
          v-model="item.isSelected"
          type="checkbox"
          name=""
          class="choose"
        />
      </td>
      <td class="tal">
        <a href="#" class="pic"
          ><img :src="item.img" alt="" width="100px" height="100px"
        /></a>
      </td>
      <td class="tal">
        <a href="#">{{ item.name }}</a>
      </td>
      <td>
        <del class="tdl">{{ item.oldPrice }}</del>
        <br />
        <b class="unit">{{ item.price }}</b>
      </td>
      <td>
        <div class="amount">
          <a href="#" class="Increase" @click="addPrice(item.id)">+</a>
          <input type="text" :value="item.count" class="unum" />
          <a href="#" class="Reduce" @click="minusPrice(item.id)">-</a>
        </div>
      </td>
      <td>
        <b class="u-price">{{ item.price * item.count }}</b>
      </td>
      <td><a href="#" class="btn-del" @click="btnDel(item.id)">删除</a></td>
    </tr>
    <tr class="count">
      <td colspan="7">
        <div class="jiesuan clearfix">
          <div class="left fl">
            <p>
              <input
                type="checkbox"
                name=""
                class="choose_all"
                @click="allChecked"
              />
              全选&nbsp;&nbsp;&nbsp;<a
                href="#"
                class="del_check"
                @click="btnDelAll"
                >删除选中商品</a
              >
            </p>
          </div>
          <div class="right fr clearfix">
            <p>商品总计：￥{{ preGoodsPrice }}</p>
            <p>活动优惠：-￥{{ discountsPrice }}</p>
            <p>
              已选商品<span class="red t-number"> {{ goodsCountPrice }} </span
              >件 总价(不含运费、税费)：<span class="red t-price"
                >￥{{ goodsPrice }}</span
              >
            </p>
            <!-- <div><a href="#" class="btn pay">结算</a></div> -->
            <a href="#" class="btn pay fr">结算</a>
          </div>
        </div>
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  nema: 'MyTable',

  props: {
    renderData: Array,
    ckAll: Boolean,
    computAddPrice: Number,
    goodsCount: Array,
    preGoodsPrice: Number,
    goodsPrice: Number,
    goodsCountPrice: Number,
    discountsPrice: Number,
  },

  methods: {
    allChecked() {
      this.$emit('allChecked', !this.ckAll)
    },

    addPrice(id) {
      this.$emit('addPrice', id)
    },
    minusPrice(id) {
      this.$emit('minusPrice', id)
    },
    btnDel(id) {
      this.$emit('btnDel', id)
    },
    btnDelAll(id) {
      this.$emit('btnDelAll', id)
    },
  },
}
</script>

<style></style>
